<template>
  <div>
    <el-tabs v-model="activeName" style="width: 651px">
      <el-tab-pane label="基本设置" name="first">
        <el-form ref="form" :rules="rules" :model="step" label-width="120px">
          <el-form-item label="步骤名称" prop="name">
            <el-input v-model="step.name" placeholder="请输入步骤名称"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="wsURL">
            <el-row>
              <el-col :span="16">
                <el-input v-model="step.wsURL"></el-input>
              </el-col>
              <el-col :span="8">
                <el-button @click="loadService" type="info" style="margin-left: 12px;margin-right: 12px">加载服务 </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="接口">
            <el-select v-model="step.wsOperation">
              <el-option v-for="item in webService.interfaceList" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="2.0/3.0 兼容模式">
            <el-checkbox true-label="Y" false-label="N" :min="0" :step="500" v-model="step.compatible"></el-checkbox>
          </el-form-item>
          <el-form-item label="调用次数">
            <el-input-number :min="1" :step="1" v-model="step.callStep"></el-input-number>
          </el-form-item>
          <el-form-item label="重复元素名称">
            <el-input v-model="step.repeating_element"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="入参设置" name="second">
        <el-form ref="form2" label-width="150px">
          <el-button icon="plus" @click="addFieldsIn">添加参数</el-button>
          <el-button type="primary" @click="step.fieldsInList=fetchFromService(0)">获取字段</el-button>
          <br><br>
          <el-table :data="step.fieldsInList" stripe border :max-height="350" :max-width="600">
            <el-table-column type="index" :width="60"></el-table-column>
            <el-table-column label="名称" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.name}}</div>
                <div v-else>
                  <el-select v-model="scope.row.name" size="mini">
                    <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="ws名称" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.wsName}}</div>
                <div v-else>
                  <el-input v-model="scope.row.wsName" size="mini"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="ws类型" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.xsdType}}</div>
                <div v-else class="control">
                  <el-input v-model="scope.row.xsdType" size="mini"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="控制" :width="140">
              <template scope="scope">
                <el-row>
                  <el-col :span="12">
                    <el-button type="info" @click="reverseEditState(scope.$index, scope.row)" size="mini">编辑</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="danger"
                               @click="handleDelete(scope.$index, scope.row,step.fieldsInList)" size="mini">删除
                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="出参设置" name="third">
        <el-form ref="form3" label-width="150px">
          <el-button icon="plus" @click="addFieldsOut">添加参数</el-button>
          <el-button type="primary" @click="step.fieldsOutList=fetchFromService(1)">获取字段</el-button>
          <br><br>
          <el-table :data="step.fieldsOutList" stripe border :max-height="350">
            <el-table-column type="index" :width="60"></el-table-column>
            <el-table-column label="名称" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.name}}</div>
                <div v-else>
                  <el-input v-model="scope.row.name"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="ws名称" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.wsName}}</div>
                <div v-else>
                  <el-input v-model="scope.row.wsName"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="ws类型" :width="150">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.xsdType}}</div>
                <div v-else class="control">
                  <el-input v-model="scope.row.xsdType"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="控制" :width="140">
              <template scope="scope">
                <el-row>
                  <el-col :span="12">
                    <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑










                    </el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button size="small" type="danger"
                               @click="handleDelete(scope.$index, scope.row,step.fieldsOutList)">删除










                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="授权&代理" name="4th">
        <el-form ref="form4" label-width="150px">
          <el-form-item label="HTTP登录名">
            <el-input v-model="step.httpLogin"></el-input>
          </el-form-item>
          <el-form-item label="HTTP密码">
            <el-input v-model="step.httpPassword"></el-input>
          </el-form-item>
          <el-form-item label="代理主机">
            <el-input v-model="step.proxyHost"></el-input>
          </el-form-item>
          <el-form-item label="代理接口">
            <el-input v-model="step.proxyPort"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">
  .el-form-item {
    .el-input, .el-input-number, .el-select {
      width: 350px
    }
  }
</style>
<script>
  import {Steps, Fields} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";
  import HttpRequest from "../../model/HttpRequset";

  export default{
    mixins: [StepCommon],
    data(){
      return {
        activeName: "first",
        step: Steps.WebServiceLookup(),
        webService: {
          nameSpace: "",
          interfaceList: []
        },
        rules: {
          wsURL: [
            {required: true, message: 'url不能为空', trigger: 'blur'},
          ]
        }
      }
    },
    methods: {
      addFieldsIn(){
        this.step.fieldsInList.push(Fields.WebServiceLookup())
      },
      addFieldsOut(){
        this.step.fieldsOutList.push(Fields.WebServiceLookup())
      },
      /**
       * 从后台读取webservice数据
       * */
      loadService(){
        let data = this.step;
        this.$refs.form.validate((valid) => {
          if (valid) {
            HttpRequest.webServiceAnalysis({
              url: data.wsURL,
              user: data.httpLogin,
              password: data.httpPassword
            }).then(el => {
              this.webService = el.data;
              this.step.wsOperationNamespace=el.data.nameSpace;
              this.$notify({type: 'success', title: '成功', message: "解析成功", duration: 2000, offset: 200});
            }).catch(el => {
              this.webService = {nameSpace: "", interfaceList: []};
              this.$notify.error({title: '错误', message: "解析url失败", duration: 2000, offset: 200});
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 根据传入的field 获取指定的webService的入参或者出参列表,
       * 然后赋值给fieldInlist或者fieldOutList
       * @type : 0:in 1:out
       * */
      fetchFromService(field){
        //为空则
        let fieldList = [], fieldX = field || 0, key = ["inParms", "outParms"][fieldX || 0];
        if (this.step.wsOperation !== "") {
          this.webService.interfaceList.filter(el => el.name === this.step.wsOperation).forEach(el => {
            let list = el[key];
            if (Array.isArray(list)) {
              list.forEach(el => {
                let obj = {wsName: el.name,xsdType: el.type};
                if (field === 0)
                  obj.name = "";
                else
                  obj.name = el.name;
                fieldList.push(Fields.WebServiceLookup(obj))
              });
            }
          })
        }
        return fieldList;
      }
    }
  }
</script>
